<template>
  <div>
    <pre>
       插槽
          默认插槽
               定义
                   xxx
                      slot 标签
               使用
                   xxx  内容
          具名插槽
               定义
                     slot 标签 name="abc"
               使用
                   template #abc
                      内容
          作用域插槽：子组件传了个值给插槽
             默认插槽
                  定义
                     slot 标签   num=999  aaa="111"
                   使用
                      template  v-slot="scope"
                         scope:{
                          num:999,
                          aaa:111
                         }

             具名插槽
                  定义
                     slot 标签 name="ooo"   num=999  aaa="111"
                   使用
                      template  v-slot="scope"  v-slot:ooo
                      template  #ooo="scope"
                         scope:{
                          num:999,
                          aaa:111
                         }

    </pre>
    <Son>
      <!-- <h4>我是son默认插槽内容</h4> -->
      <template #abc>
        <h4 style="color: red">我是abc具名插槽使用</h4>
      </template>
      <template v-slot="scope">
        <h4>{{ scope.aaa + ' ,' + scope.num }}</h4>
      </template>
      <template #ooo="{ str }">
        <h4 style="color: orange">{{ str }}</h4>
      </template>
    </Son>
  </div>
</template>
<script>
import Son from './components/son'
export default {
  components: {
    Son
  }
}
</script>
<style></style>
